<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view class="binding">
			<view class="bindings">





				<view class="buy-img" @click="FaRenImg">
					<view class="buy-txt">法人身份证正面</view>
					<view class="buy-sfz" v-if="idCardPhotoUrl == ''">
						<image src="https://public-1329395846.cos.ap-nanjing.myqcloud.com/images/xx1.png" mode="">
						</image>
						<view class="buy-sfz-xj">
							<view class="buy-sfz-xj1">
								<image src="https://public-1329395846.cos.ap-nanjing.myqcloud.com/images/xx11.png"
									mode=""></image>
							</view>
							<view class="buy-sfz-xjtxt">点击上传手持身份证正面</view>
						</view>
					</view>
					<view class="buy-sfz" v-if="idCardPhotoUrl != ''">
						<image :src="idCardPhotoUrl" mode=""></image>
					</view>
				</view>
				
				<view class="buy-img" @click="FaRenImg">
					<view class="buy-txt">法人身份证反面</view>
					<view class="buy-sfz" v-if="idCardPhotoUrl == ''">
						<image src="https://public-1329395846.cos.ap-nanjing.myqcloud.com/images/xx2.png" mode="">
						</image>
						<view class="buy-sfz-xj">
							<view class="buy-sfz-xj1">
								<image src="https://public-1329395846.cos.ap-nanjing.myqcloud.com/images/xx11.png"
									mode=""></image>
							</view>
							<view class="buy-sfz-xjtxt">点击上传手持身份证正面</view>
						</view>
					</view>
					<view class="buy-sfz" v-if="idCardPhotoUrl != ''">
						<image :src="idCardPhotoUrl" mode=""></image>
					</view>
				</view>



			</view>

			<view class="bindings-txt">您已经绑定过手机号码，如果再次绑定将取消之前绑定记录</view>
			<view class="bindings-btn">提交</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px",
				timeState: 0,
				time: 59,

				imageValue: [],
				idCardPhotoUrl: '', //法人手持身份证正面
			}
		},
		onLoad() {
			// const value = uni.getStorageSync('token');
			// this.token = value
			this.GaoDu() //判断手机高度
		},
		methods: {

			FaRenImg() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						uni.uploadFile({
							url: this.$api.upload, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							header: {
								Authorization: 'Bearer ' + this.token,
								clientid: '428a8310cd442757ae699df5d894f051'
							},
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data));
								let date = JSON.parse(uploadFileRes.data)
								this.idCardPhotoUrl = tempFilePaths[0]
								this.idCardPhoto = date.data.ossId
							}
						});
					}
				});
			},
			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		background: #ECF4FF;
	}

	.binding {
		padding: 25rpx;
	}

	.bindings {

		padding: 25rpx 25rpx 0rpx 25rpx;
		background: #fff;
	}

	.bindings-one {
		display: flex;
		padding-bottom: 25rpx;
		border-bottom: 3rpx solid #F3F3F3;
		margin-bottom: 25rpx;
	}

	.bindings-one-left {
		width: 180rpx;
		font-size: 30rpx;

	}

	.bindings-one-rig {
		font-size: 28rpx;
	}

	.bindings-one-rigg {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 68%;
	}

	.rig-btn {
		background: #607EF5;
		width: 180rpx;
		height: 70rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 70rpx;
		color: #fff;
		border-radius: 15rpx;
	}

	.bindings-txt {
		font-size: 26rpx;
		color: #E7888A;
		margin-bottom: 80rpx;
	}

	.bindings-btn {
		background: #6C74F1;
		width: 80%;
		margin: auto;
		height: 80rpx;
		border-radius: 100rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;

	}
	.buy-img {
		width: 686rpx;
		height: 468rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 32rpx;
	}
	
	.buy-txt {
		font-family: HarmonyOS_Sans_SC;
		font-size: 32rpx;
		color: #333333;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		padding-left: 32rpx;
		padding-top: 32rpx;
	}
	
	.buy-sfz {
		width: 622rpx;
		height: 336rpx;
		padding-top: 26rpx;
		margin: auto;
		position: relative;
	}
	
	.buy-sfz image {
		width: 100%;
		height: 100%;
	}
	
	.buy-sfz-xj {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			height: 100%;
	
		}
	
		.buy-sfz-xj1 {
			width: 104rpx;
			height: 104rpx;
			padding-top: 110rpx;
			margin: auto;
		}
	
		.buy-sfz-xj image {
			width: 100%;
			height: 100%;
		}
	
		.buy-sfz-xjtxt {
			text-align: center;
			font-family: HarmonyOS_Sans_SC;
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			font-style: normal;
			padding-top: 20rpx;
		}
</style>